<template>
    <v-layout type="main">
      <p class="page-title">模型部署</p>
      <div class="detail-box" v-if="!$route.meta.hideDetails">
        <div class="pic">
          <img src="@/assets/img/test-pic.png" alt="">
        </div>
        <div class="word">
          <h3 class="title">
            <!-- {{detailData.alias}} -->
            {{ detailData.name }}
            <el-button class="back" type="text" icon="el-icon-right" @click="$router.push({ path: '/gameDeploy' })" />
          </h3>
          <p class="hint">{{detailData.desc}}</p>
          <div class="creat-info">
            <span>状态：<strong :class="['alick-layout-status', detailData.status]">{{statusMap[detailData.status]}}</strong></span>
            <span>创建人：{{detailData.create_user && (detailData.create_user.nick_name || detailData.create_user.user_name)}}</span>
            <span>创建时间 {{detailData.create_time}}</span>
          </div>
          <div class="alick-handle-btns">
            <a class="handle-btn" href="javascript:;" @click="update" v-show="detailData.status == 'terminated'">修改</a>
            <a class="handle-btn" href="javascript:;" @click="start" v-show="detailData.status == 'terminated'">启动</a>
            <a class="handle-btn" href="javascript:;" @click="goToLink" v-show="detailData.status == 'running'">打开仿真前端</a>
            <a class="handle-btn" href="javascript:;" @click="stop" v-show="detailData.status != 'terminated'">停止</a>
          </div>
        </div>
      </div>
      <el-radio-group v-model="nowRouter" size="medium" @change="skip" class="nav-alike" v-show="!$route.meta.hideDetails">
        <el-radio-button :label="e.name"  v-for="(e, i) in thisRouter" :key="i">
          <span class="nav-alike-item">{{ e.meta.title }}</span>
        </el-radio-button>
      </el-radio-group>
      <div :class="['layout-content', {'layout-content-nodetail': $route.meta.hideDetails}]">
  
        <router-view class="content-detail" :detailData="detailData"  v-if="detailData" />
      </div>  
    </v-layout>
  </template>
  
  <script>
  import { getAllMarketAlgorithms } from "@/api/marketAlgorithm"
  import { startGameTaskVersion, stopGameTaskVersion } from "@/api/gameTask" 
  import { getGameDeployDetail } from '@/api/gameDeploy'
  
  export default {
    data() {
      return {
        nowRouter: this.$route.name,
        thisRouter: [],
        detailData: {},
        taskForm: {},
        modelForm: { visibility: 0 },
        marketForm:{},
        taskSubmitRules: {
          task_id: [
            { required: true, message: "该项为必填项" },
          ]
        },
        modelSubmitRules: {
          model_id: [
            { required: true, message: "该项为必填项" },
          ]
        },
        marketSubmitRules: {
          model_id: [
            { required: true, message: "该项为必填项" },
          ]
        },
        showTaskDialog: false,
        showModelDialog: false,
        showMarketDialog: false,
        taskOptions: [],
        modelOptions: [],
        marketAlgorithmOptions: [],
        task: null,
        model: null,
        algorithm: null,        
        podUrl: null
      };
    },
    methods: {
      skip() {
        let path = `/gameDeploy/${this.thisRouter.filter(e => e.name == this.nowRouter)[0].path}`
        if (path == this.$route.path) return
        this.$router.push({
          path,
          query: {
            id: this.$route.query.id
          }
        })
      },
      async getDetail() {
        if (!this.$route.query.id) return
        let res = await getGameDeployDetail({ id: this.$route.query.id });
        if (res && res.data) {
          this.detailData = res.data;
        }
        console.log('.............')
        console.log(this.detailData)        
        this.genUrl()
      },
      async modelVisibilityChange() {
        let res = await getAllMarketAlgorithms();
        if (res && res.data) {
          this.modelOptions = res.data;
        }
      },
      update() {
        let query = {
          id: this.detailData.id
        }
        this.$router.push({
          path: '/gameDeploy/detail',
          query
        })
      },        
      goToLink() {
        let path = this.podUrl;
        if (this.podUrl == null) {
          alert('仿真前端地址解析失败, 请在刷新页面后重试')
        }
        window.open(path, '_blank');
      },
      genUrl() {
        if (this.detailData.status != 'running' && this.detailData.tcp_port_list && this.detailData.tcp_port_list.length != 0 ) {
          return null;
        }     
        let tcp_port_list = this.detailData.tcp_port_list   
        if (!tcp_port_list) return
        let simulationFrontUrl = process.env.VUE_APP_SIMULATION_URL; 
        let nodePort4000 = tcp_port_list.filter(map => map.containerPort == '4000')[0].nodePort;
        let nodePort4001 = tcp_port_list.filter(map => map.containerPort == '4001')[0].nodePort;
        let endpoint = tcp_port_list[0].endpoint.split(':')[0];        
        let url = `${simulationFrontUrl}/#/Menu?IP=${endpoint}&port1=${nodePort4000}&port2=4001&port3=${nodePort4001}`;
        this.podUrl = url;               
      },    
      start() {
        startGameTaskVersion({ id: this.detailData.id });  
      },
      stop() {
        stopGameTaskVersion({ id: this.detailData.id });
      }
    },
    mounted() {
      let temp = this.$router.options.routes.filter(
        e => e.name == 'gameDeploy' && e.children
      )
      this.thisRouter = temp[0].children.filter(e => !e.meta.hideDetails)
      this.getDetail()
      this.$EventBus.$on('task', e => {
        console.log(e)
        this.getDetail()
      })
    },
    destroyed() {
      this.$EventBus.$off('task')
    },
  }
  </script>
  <style lang="less" scoped>
  @import "~@/assets/css/detail-layout.less";
  </style>